<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="accountsQueryValue.accountType"
        :placeholder="accountsQueryRemark.accountType"
        clearable
        class="filter-item"
        style="width: 130px"
      >
        <el-option
          v-for="item in accountsQueryRemark.accountTypeOptions"
          :key="item.key"
          :label="item.displayName + '(' + item.key + ')'"
          :value="item.key"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        {{ accountsQueryRemark.search }}
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleAdd"
      >
        {{ accountsQueryRemark.add }}
      </el-button>
      <el-button
        v-waves
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        {{ accountsQueryRemark.export }}
      </el-button>
    </div>

    <el-table
      :data="accountsData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        :label="accountsRemark.id"
        prop="id"
        sortable="custom"
        align="center"
        width="80"
        :class-name="getSortClass('id')"
      >
        <template #default="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="accountsRemark.accountId"
        width="180px"
        align="center"
      >
        <template #default="{ row }">
          <span>{{ row.accountId }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="accountsRemark.money" min-width="100px">
        <template #default="{ row }">
          <span class="link-type" @click="handleUpdate()">{{ row.money }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="accountsRemark.type"
        class-name="status-col"
        width="100"
      >
        <template #default="{ row }">
          <el-tag :type="row.type">
            {{ row.type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="createdTime"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="accountsRemark.operation"
        align="center"
        width="260"
        class-name="fixed-width"
      >
        <template #default="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="seekPassword(row.password)"
          >
            {{ accountsRemark.seek }}
          </el-button>
          <el-button type="success" size="mini" @click="addDeposit(row)">
            {{ accountsRemark.deposit }}
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="delAccount(row.accountId)"
          >
            {{ accountsRemark.danger }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="accountsQueryRemark.total"
      v-show="accountsQueryRemark.total > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="accountsQueryValue.currentPage"
      :page-sizes="[3, 5, 8, 10]"
      layout="total, sizes, prev, pager, next, jumper"
    />

    <!--          request to create account dialogue     *************************************** -->
    <el-dialog
      :title="createAccountRemark.title"
      :visible.sync="createAccountRemark.isVisible"
      :before-close="close"
    >
      <el-form
        :rules="rules"
        :model="createAccountValue"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item :label="createAccountRemark.password" prop="title">
          <el-input
            v-model="createAccountValue.password"
            :key="createAccountRemark.passwordType"
            :type="createAccountRemark.passwordType"
            placeholder="Password"
            tabindex="2"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="
                createAccountRemark.passwordType === 'password'
                  ? 'eye'
                  : 'eye-open'
              "
            />
          </span>
        </el-form-item>
        <el-form-item :label="createAccountRemark.comfirmPassword" prop="title">
          <el-input
            v-model="createAccountValue.comfirmPassword"
            :key="createAccountRemark.passwordType2"
            :type="createAccountRemark.passwordType2"
            placeholder="Password"
            tabindex="2"
          />
          <span class="show-pwd" @click="showPwd2">
            <svg-icon
              :icon-class="
                createAccountRemark.passwordType2 === 'password'
                  ? 'eye'
                  : 'eye-open'
              "
            />
          </span>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="createAccountRemark.isVisible = false">
          {{ createAccountRemark.cancel }}
        </el-button>
        <el-button type="primary" @click="createAccount">
          {{ createAccountRemark.confirm }}
        </el-button>
      </div>
    </el-dialog>

    <!--          see password dialogue     *************************************** -->
    <el-dialog
      :title="passwordRemark.title"
      :visible.sync="passwordRemark.isVisible"
    >
      <el-form
        :rules="rules"
        :model="passwordRemark"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item :label="passwordRemark.passwordTitle" prop="title">
          <el-input
            v-model="passwordRemark.password"
            :key="passwordRemark.passwordType"
            :type="passwordRemark.passwordType"
            placeholder="Password"
            tabindex="2"
          />
          <span class="show-pwd" @click="showPwd3">
            <svg-icon
              :icon-class="
                passwordRemark.passwordType === 'password' ? 'eye' : 'eye-open'
              "
            />
          </span>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--          create deposit dialogue     *************************************** -->
    <el-dialog
      :title="createDepositRemark.title"
      :visible.sync="createDepositRemark.isVisible"
    >
      <el-form
        ref="createDepositValue"
        :model="createDepositValue"
        label-width="120px"
      >
        <el-form-item :label="createDepositRemark.accountId">
          <el-input v-model="createDepositValue.accountId" />
        </el-form-item>
        <el-form-item :label="createDepositRemark.money">
          <el-input v-model="createDepositValue.money" />
        </el-form-item>
        <el-form-item :label="createDepositRemark.type">
          <el-select
            v-model="createDepositValue.type"
            placeholder="please select your deposit type"
          >
            <el-option
              v-for="item in createDepositRemark.typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="createDepositRemark.createTime">
          <el-col :span="11">
            <el-date-picker
              v-model="createDepositValue.createTime"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="4" class="line">时长：(/月)</el-col>
          <el-col :span="3">
            <el-input v-model="createDepositValue.duration"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createDeposit">创建</el-button>
          <el-button @click="createDepositRemark.isVisible = false"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      accountsRemark: {
        id: "序号",
        accountId: "银行卡号",
        money: "余额",
        type: "类型",
        createdTime: "创建时间",
        operation: "操作",
        seek: "查看密码",
        deposit: "存款",
        danger: "注销",
      },
      accountsData: [
        {
          id: 0,
          accountId: "123456",
          money: "100",
          type: "储蓄卡",
          createdTime: "2021/5/6",
        },
      ],
      accountsQueryRemark: {
        accountTypeOptions: [
          { key: "deposit", displayName: "储蓄卡" },
          { key: "loan", displayName: "借记卡" },
        ],
        accountType: "账户类型",
        search: "搜索",
        add: "申请开户",
        export: "导出",
        total: 10,
      },
      accountsQueryValue: {
        accountType: "",
        page: 1,
        limit: 10,
        currentPage: 1,
      },
      createAccountValue: {
        password: "",
        comfirmPassword: "",
        url: "/user/account/create",
      },
      createAccountRemark: {
        title: "申请开户",
        password: "密码",
        comfirmPassword: "确认密码",
        isVisible: false,
        cancel: "取消",
        confirm: "确认",
        passwordType: true,
        passwordType2: true,
      },
      passwordRemark: {
        title: "查看密码",
        passwordTitle: "",
        password: "",
        isVisible: false,
        passwordType: "password",
      },
      createDepositRemark: {
        accountId: "银行卡号",
        money: "存款金额",
        type: "存款类型",
        typeOptions: [
          {
            label: "定期存款",
            value: "FixedDeposit",
          },
          {
            label: "活期存款",
            value: "DemandDeposit",
          },
        ],
        createTime: "存款时间",
        duration: "时长",
        isVisible: false,
        maxMoney: "",
      },
      createDepositValue: {
        accountId: "",
        money: "",
        type: "",
        createTime: "",
        duration: "",
        url: "/basic/deposit/add",
      },
    };
  },
  created() {
    this.getAccountsData();
  },
  methods: {
    getAccountsData() {
      this.$store
        .dispatch("request/get", "/user/account/query/vo")
        .then((data) => {
          this.accountsData = data;
        });
    },
    getSortClass(key) {},
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        dataMap.sortByID(order);
      }
    },
    handleSeekInfo() {
      this.dialogueRemark.isVisible = true;
    },
    updateData() {},
    handleDelete() {},
    handleCurrentChange(page) {
      console.log(page);
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleAdd() {
      this.createAccountRemark.isVisible = true;
    },
    showPwd() {
      if (this.createAccountRemark.passwordType === "password") {
        this.createAccountRemark.passwordType = "";
      } else {
        this.createAccountRemark.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    showPwd2() {
      if (this.createAccountRemark.passwordType2 === "password") {
        this.createAccountRemark.passwordType2 = "";
      } else {
        this.createAccountRemark.passwordType2 = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    showPwd3() {
      if (this.passwordRemark.passwordType === "password") {
        this.passwordRemark.passwordType = "";
      } else {
        this.passwordRemark.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    close(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    createAccount() {
      console.log(this.createAccountValue);
      if (
        this.createAccountValue.password !=
        this.createAccountValue.comfirmPassword
      ) {
        this.$message.error("两次密码不一致!!");
      } else {
        this.$store
          .dispatch("request/post", this.createAccountValue)
          .then(() => {
            this.getAccountsData();
            this.$message.success("添加成功！");
            this.createAccountRemark.isVisible = false;
          })
          .catch(() => {
            this.$message.error("添加失败！");
          });
      }
    },
    seekPassword(password) {
      this.passwordRemark.password = password;
      this.passwordRemark.isVisible = true;
    },
    addDeposit(data) {
      this.createDepositValue.accountId = data.accountId;
      this.createDepositRemark.maxMoney = data.money;
      this.createDepositRemark.isVisible = true;
    },
    delAccount(accountId) {
      let data = {
        accountId: accountId,
        url: "/user/account/del",
      };
      this.$store.dispatch("request/post", data).then(() => {
        this.getAccountsData();
        this.$message.error("注销成功！！");
      });
    },
    createDeposit() {
      if (this.createDepositValue.money > this.createDepositRemark.maxMoney) {
        this.$message.error(
          "银行卡里余额不足: " + this.createDepositValue.money + "元"
        );
      } else {
        this.$store
          .dispatch("request/post", this.createDepositValue)
          .then(() => {
            this.$message.success("存款成功!!");
            this.createDepositRemark.isVisible = false
            this.getAccountsData();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.show-pwd {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>